<template>
  <div class="content">
    <div class="header">
      <div class="header_l"></div>
      <div class="header_m"></div>
      <div class="header_r">
        <div class="h-r-timer">
          <span>{{ timerInfo1 }}</span>
          <span>{{ timerInfo2 }}</span>
          <span>{{ timerInfo3 }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 左侧 -->
      <div class="main_l">
        <div class="item mainl1">
          <div class="bg">
            <span class="title">人员信息</span>
          </div>
          <div class="info">
            <div class="person flex">
              <div class="newWork flex">
                <img src="../../assets/img/main/icon.png" alt="" srcset="" />
                <div class="personItem">
                  <div class="personNum">
                    <div class="num">{{ ondutyInfo.newfactory }}</div>
                    <div class="pice">(人)</div>
                  </div>
                  <div class="personTxt">新厂区到岗人数</div>
                </div>
              </div>
              <div class="newWork oldWork flex">
                <img src="../../assets/img/main/icon.png" alt="" srcset="" />
                <div class="personItem">
                  <div class="personNum">
                    <div class="num">{{ ondutyInfo.oldfactory }}</div>
                    <div class="pice">(人)</div>
                  </div>
                  <div class="personTxt">老厂区到岗人数</div>
                </div>
              </div>
            </div>
            <div class="reportduty flex">
              <div class="title">今日厂区到岗人数及占比</div>
              <div class="upload-box">
                <!-- <img src="../../assets/img/main/downLoad.png" alt="" srcset=""> -->
              </div>
            </div>
            <div class="rolschart">
              <v-chart autoresize :option="stateData.option1"></v-chart>
            </div>
          </div>
        </div>
        <div class="item mainl2">
          <div class="bg">
            <span class="title">访客信息</span>
          </div>
          <div class="info">
            <div class="tableConent">
              <ul class="tab-head">
                <li>访客姓名</li>
                <li>访客对象</li>
                <li>所属单位</li>
                <li>来访时间</li>
                <li>车牌号</li>
              </ul>
              <div class="swiper tableBoxLeft">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide flex"
                    v-for="(i, index) in vistorlist"
                    :key="index"
                    :class="(index + 1) % 2 != 0 ? 'slidA' : ''"
                  >
                    <div class="item">{{ i.personName }}</div>
                    <div class="item">{{ i.isv_name }}</div>
                    <div class="item">{{ i.dw }}</div>
                    <div class="item">{{ i.time }}</div>
                    <div class="item">{{ i.plate }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="timeBox">
              <div class="leftTime">
                <el-config-provider :locale="zhcn">
                  <el-date-picker
                    :clearable="true"
                    @change="getVistorlistInfo"
                    placeholder="请选择时间"
                    v-model="visitorTime"
                    prefix-icon=""
                    type="month"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    show-calendar="false"
                  >
                  </el-date-picker>
                </el-config-provider>
              </div>
              <div class="rightLoad" @click="visitorDownLoad">下载报表</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main_m">
        <div class="item mainr1 flex">
          <div
            class="top-title-box"
            :class="index == flagStr.top1Flag ? 'top-title-box-A' : ''"
            v-for="(item, index) in centerState.topTitle"
            :key="index"
            @click="handleActive(index, 'top1Flag', item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="item mainr2 flex">
          <div class="info">
            <!-- 上部样式 60% -->
            <div class="bottom-bg">
              <div
                class="iconBox1"
                v-for="(item, index) in stateData.centerList"
                :key="index"
                :class="'iconBox' + (index + 1)"
              >
                <img
                  :src="getAssetsFile(`center-icon${index + 1}` + '.png')"
                  alt=""
                  srcset=""
                />
                <div class="detail1">
                  <div
                    class="numBox"
                    :class="
                      item.status == 'ping'
                        ? 'ping'
                        : item.status == 'reduce'
                        ? 'numBox'
                        : 'red'
                    "
                  >
                    <span class="num">{{ item.all }}</span>
                    <img
                      :src="
                        getAssetsFile(
                          (item.status == 'ping'
                            ? 'ping'
                            : item.status == 'reduce'
                            ? 'down'
                            : 'up') + '.png'
                        )
                      "
                      alt=""
                      srcset=""
                    />
                    <span class="num2">{{ item.num }}</span>
                  </div>
                  <div class="txtBox">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <!-- <div class="iconBox1" :class="'iconBox2'">
                <img src="../../assets/img/main/center-icon1.png" alt="" srcset="">
                <div class="detail1 detail2">
                  <div class="numBox" :class="'ping'">
                    <span class="num">89</span>
                    <img src="../../assets/img/main/center-icon2.png" alt="" srcset="">
                    <span class="num2">0</span>
                  </div>
                  <div class="txtBox">
                    区域闯入
                  </div>
                </div>
              </div> -->
            </div>
            <!-- 下部样式40% -->
            <div class="alarm-safety flex">
              <div class="alarmBox">
                <div class="navBox">
                  <div class="left">
                    <img
                      src="../../assets/img/main/titleIcon.png"
                      alt=""
                      srcset=""
                    />
                    <span>告警数据</span>
                  </div>
                  <div class="right">
                    <div
                      class="navItem"
                      :class="item.name === flagStr.flagNav ? 'navItemA' : ''"
                      v-for="(item, index) in stateData.selectNav"
                      :key="index"
                      @click="handleActive(item.name, 'flagNav', index)"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </div>
                <div class="echartsBox">
                  <v-chart autoresize :option="stateData.option3"></v-chart>
                </div>
              </div>
              <div class="safetyBox">
                <div class="navBox">
                  <div class="left">
                    <img
                      src="../../assets/img/main/titleIcon.png"
                      alt=""
                      srcset=""
                    />
                    <span>安防设备详情</span>
                  </div>
                </div>
                <div class="safety-content flex">
                  <div class="safety-left">
                    <div
                      class="safety-leftItem"
                      v-for="(item, index) in stateData.safetyList1"
                      :key="index"
                    >
                      <img
                        :src="
                          getAssetsFile(
                            'center-anVideo-' + item.status + '.png'
                          )
                        "
                        alt=""
                        srcset=""
                      />
                      <div class="itemR">
                        <div
                          class="numBox"
                          :class="
                            item.status == 'g'
                              ? 'green'
                              : item.status == 'y'
                              ? 'yellow'
                              : 'red'
                          "
                        >
                          <div class="num">{{ item.num }}</div>
                          <div class="bai" v-if="item.pic == '%'">%</div>
                          <div class="pice" v-else>{{ item.pic }}</div>
                        </div>
                        <div class="itemName">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="safety-left">
                    <div
                      class="safety-leftItem"
                      v-for="(item, index) in stateData.safetyList2"
                      :key="index"
                    >
                      <img
                        :src="
                          getAssetsFile(
                            'center-roomVideo-' + item.status + '.png'
                          )
                        "
                        alt=""
                        srcset=""
                      />
                      <div class="itemR">
                        <div
                          class="numBox"
                          :class="
                            item.status == 'g'
                              ? 'green'
                              : item.status == 'y'
                              ? 'yellow'
                              : 'red'
                          "
                        >
                          <div class="num">{{ item.num }}</div>
                          <div class="bai" v-if="item.pic == '%'">%</div>
                          <div class="pice" v-else>{{ item.pic }}</div>
                        </div>
                        <div class="itemName">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr3 flex">
          <div class="info">
            <div class="navBox">
              <div class="left">
                <img
                  src="../../assets/img/main/titleIcon.png"
                  alt=""
                  srcset=""
                />
                <span>近七日告警类型统计</span>
              </div>
            </div>
            <div class="dayEcharts">
              <v-chart autoresize :option="stateData.option2"></v-chart>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="main_r">
        <div class="item mainr1">
          <div class="bg">
            <span class="title">告警信息</span>
          </div>
          <div class="info">
            <div class="infoBox">
              <div class="infoTable">
                <ul class="tab-head">
                  <li>
                    <el-select
                      v-model="selectAlaram.type"
                      placeholder="告警类型"
                      size="small"
                      @change="getAlarms"
                    >
                      <el-option
                        v-for="(item, index) in stateData.optionsSelect"
                        :key="index"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                    <!-- 告警类型 -->
                  </li>
                  <li>告警位置</li>
                  <li>告警内容</li>
                  <li>告警时间</li>
                  <li>状态</li>
                  <li>告警详情</li>
                </ul>
                <div class="swiper tableBox">
                  <div class="swiper-wrapper">
                    <div
                      class="swiper-slide"
                      v-for="(item, index) in leftSwiper1"
                      :key="index"
                      :class="(index + 1) % 2 == 0 ? 'slidA' : ''"
                    >
                      <div class="item">{{ item?.type }}</div>
                      <div class="item">{{ item?.position }}</div>
                      <div class="item">{{ item?.content }}</div>
                      <div class="item">{{ item?.time }}</div>
                      <div class="item" :class="'red'">
                        {{ item.alarm_status == 1 ? '已处理' : '未处理' }}
                      </div>
                      <div class="item">
                        <el-image
                          v-if="item.image"
                          style="width: 100%; height: 100%"
                          :src="item?.image"
                          :preview-src-list="[`${item?.image}`]"
                          preview-teleported
                        />
                        <span v-else>无</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="timeBox">
                <div class="leftTime">
                  <el-config-provider :locale="zhcn">
                    <el-date-picker
                      :clearable="true"
                      v-model="selectAlaram.time"
                      placeholder="请选择时间"
                      @change="getAlarms"
                      prefix-icon=""
                      type="month"
                      format="YYYY-MM"
                      value-format="YYYY-MM"
                      show-calendar="false"
                    >
                    </el-date-picker>
                  </el-config-provider>
                </div>
                <div class="rightLoad" @click="alarmdownload">下载报表</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr2">
          <div class="bg">
            <span class="title">会议信息</span>
          </div>
          <div class="info">
            <div class="infoBox">
              <div class="infoTable">
                <ul class="tab-head">
                  <li>会议名称</li>
                  <li>会议时间</li>
                  <li>会议室</li>
                  <li>会议状态</li>
                </ul>
                <div class="swiper tableBoxRight">
                  <div class="swiper-wrapper">
                    <div
                      class="swiper-slide"
                      v-for="(i, index) in meetingList"
                      :key="index"
                      :class="(index + 1) % 2 == 0 ? 'slidA' : ''"
                    >
                      <div class="item">{{ i.name }}</div>
                      <div class="item">{{ i.time }}</div>
                      <div class="item">{{ i.room }}</div>
                      <div
                        class="item"
                        :class="(index + 1) % 2 == 0 ? 'red' : 'green'"
                      >
                        {{ i.status }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="timeBox">
                <div class="leftTime">
                  <el-config-provider :locale="zhcn">
                    <el-date-picker
                      :clearable="true"
                      v-model="meetTime"
                      @change="getMeetinglistInfo"
                      placeholder="请选择时间"
                      prefix-icon=""
                      type="month"
                      format="YYYY-MM"
                      value-format="YYYY-MM"
                      show-calendar="false"
                    >
                    </el-date-picker>
                  </el-config-provider>
                </div>
                <div class="right flex">
                  <div class="rightLoad" @click="createRom">创建会议</div>
                  <div
                    class="rightLoad"
                    style="margin-left: 10px"
                    @click="meetingdownload"
                  >
                    下载报表
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div class="ifreamBox" v-if="isIfream">
      <div class="item">
        <div class="title">
          <span>创建会议</span>
          <div class="close" @click="closeIfreamBox"></div>
        </div>
        <div class="ifreamBox-content">
          <div class="left">会议信息</div>
          <div class="right">
            <el-form
              style="max-width: 600px"
              ref="ruleFormRef"
              :model="sizeForm"
              size="small"
              label-width="auto"
              label-position="top"
            >
              <el-form-item label="会议名称">
                <el-input
                  v-model="sizeForm.subject"
                  placeholder="请输入会议名称"
                />
              </el-form-item>
              <el-col :span="24">
                <el-form-item label="会议时间">
                  <el-config-provider :locale="zhcn">
                    <el-date-picker
                      v-model="sizeForm.date"
                      type="datetimerange"
                      range-separator="To"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      style="width: 100%"
                      popper-class="half-size-date-picker"
                    />
                  </el-config-provider>
                </el-form-item>
              </el-col>
              <el-col class="text-center" :span="1"></el-col>
              <el-col :span="24">
                <el-form-item label="会议室">
                  <el-select
                    v-model="sizeForm.room"
                    placeholder="选择会议室"
                    size="small"
                    style="width: 100%; height: 100%"
                  >
                    <el-option
                      v-for="item in meetingInfo"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-form-item>
                <div class="btnGrop">
                  <div class="submit" @click="createMeeting">创建会议</div>
                  <div class="close" @click="closeIfreamBox">取消</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  alarms,
  getOnduty,
  getDeponduty,
  getVistorlist,
  getAlarmtypecount,
  getAlarmtypecount7,
  setCreatemeeting,
  getAlarmdownload,
  getMeetingdownload,
  getVistorlistdownload,
  getMeetinglist,
  getmeetingroom,
  getDevicestatus,
  getFuncs,
} from '../../api/Home'
import Home from '@/Hooks/Home'
import zhcn from 'element-plus/es/locale/lang/zh-cn'
import CountUp from 'vue-countup-v3'
import { ElMessage } from 'element-plus'
import Center from '@/Hooks/center'
import Swiper from 'swiper' // 引入库
import 'swiper/css/swiper.css' // 引入样式文件 注意5和6版本的样式文件不一致
import { reactive, onMounted, ref, markRaw, nextTick } from 'vue'
const { state } = Home()
const { centerState } = Center()
let stateData = reactive(state)
const jumpTOFun = (i, index) => {
  jumpToDefault.value = index
  window.open(i.url)
}
const sizeForm = reactive({
  subject: '',
  date: [],
  room: '',
})
const timerInfo1 = ref('')
const timerInfo2 = ref('')
const timerInfo3 = ref('')
const selectAlaram = reactive({
  type: '',
  time: '',
  // time: new Date().toISOString().slice(0, 7),
})
const meetTime = ref(new Date().toISOString().slice(0, 7)) // 会议时间
const visitorTime = ref(new Date().toISOString().slice(0, 7)) // 访客时间
onMounted(() => {
  getFuncsInfo()
  getmeetingroomInfo() // 会议室下拉框信息
  getMeetinglistInfo() // 会议信息列表
  getOndutyInfo() //人员信息
  getdepondutyInfo() // 在岗信息echarts
  getVistorlistInfo() // 访客列表
  getAlarms() // 告警列表
  getDevicestatusInfo() //安防设备详情
  getAlarmtypecount7Info()
  getAlarmMonthInfo()
  getAlarmtypecountInfo()
  refresh()
  getTimer()
  setInterval(() => {
    getTimer()
  }, 100)
})
// 定时刷新任务
const refresh = () => {}
// 近7日图表数据
let flagStr = reactive({
  mySwiper: null,
  mySwiperLeft: null,
  mySwiperRight: null,
  top1Flag: 1,
  flagNav: '年度',
})
// 右侧轮播图（告警）
const getAlarmtypecount7Info = async () => {
  const res = await getAlarmtypecount7()
  if (res.data.code == 0) {
    const { name, date, data1, data2, data3, data4, data5, data6 } =
      res.data.result
    stateData.option2.xAxis[0].data = date // x轴时间
    stateData.option2.series[0].name = name[0]
    stateData.option2.series[0].data = data1
    stateData.option2.series[1].name = name[1]
    stateData.option2.series[1].data = data2
    stateData.option2.series[2].name = name[2]
    stateData.option2.series[2].data = data3
    stateData.option2.series[3].name = name[3]
    stateData.option2.series[3].data = data4
    stateData.option2.series[4].name = name[4]
    stateData.option2.series[4].data = data5
    stateData.option2.series[5].name = name[5]
    stateData.option2.series[5].data = data6
  }
}
// 上面header数据
const getAlarmMonthInfo = async () => {
  const res = await getAlarmtypecount(1)
  if (res.data.code == 0) {
    const { result } = res.data
    const data = result

    const firstValues = Object.values(data).map(([first, second]) => first)
    const maxfirst = Math.max(...firstValues)
    const dataArr = Object.keys(data).map((key) => {
      const [first, second] = data[key]
      const absDifference = Math.abs(first - second)
      return {
        name: key,
        status: first > second ? 'add' : first < second ? 'reduce' : 'ping',
        all: first,
        num: absDifference,
      }
    })
    const theDataAbove = dataArr.filter((item) => {
      return item.name !== '其他警告'
    })
    stateData.centerList = theDataAbove
    console.log('theDataAbove:', theDataAbove)
  }
}
// 上面header数据
const getAlarmtypecountInfo = async (type = 3) => {
  const res = await getAlarmtypecount(type)
  if (res.data.code == 0) {
    const { result } = res.data
    const data = result
    // const data = {
    //   区域: [158, 73],
    //   设备: [6, 1549],
    //   工服: [163, 64],
    //   车辆: [3, 0],
    //   消防: [7, 7],
    //   其他: [0, 0],
    // };
    const firstValues = Object.values(data).map(([first, second]) => first)
    const maxfirst = Math.max(...firstValues)
    const dataArr = Object.keys(data).map((key) => {
      const [first, second] = data[key]
      const absDifference = Math.abs(first - second)
      return {
        name: key,
        type: first > second ? '>' : first < second ? '<' : '=',
        first: first,
        second: second,
        absDifference: absDifference,
        maxfirst: maxfirst,
      }
    })
    stateData.option3.yAxis[0].data = dataArr.map((item) => item.name)
    stateData.option3.yAxis[1].data = dataArr.map((item) => item.first)
    stateData.option3.series[0].data = dataArr.map((item) => item.first)
    stateData.option3.series[1].data = dataArr.map((item) => item.maxfirst)
  }
}
// 获取告警信息列表
let leftSwiper1 = reactive([])
const getAlarms = async () => {
  flagStr.mySwiper?.autoplay.stop()
  leftSwiper1 = []
  flagStr.mySwiper = null
  let params = {
    type: selectAlaram.type > 0 ? selectAlaram.type : 0,
    month: selectAlaram.time,
  }
  const res = await alarms(params)
  if (res.data.code == 0) {
    leftSwiper1 = res.data.data.data
    setTimeout(() => {
      SwiperInit()
    }, 1000)
  }
}
// 访客信息
let vistorlist = reactive([])
const getVistorlistInfo = async () => {
  flagStr.mySwiperLeft?.autoplay.stop()
  vistorlist = []
  flagStr.mySwiperLeft = null
  const res = await getVistorlist(visitorTime.value)
  if (res.data.code == 0) {
    vistorlist = res.data.data
    setTimeout(() => {
      SwiperInitLeft()
    }, 1000)
  }
}
// 获取assets/IMAGE静态资源
const getAssetsFile = (url) => {
  return new URL(`../../assets/img/main/${url}`, import.meta.url).href
}

// SwiperInitLeft - 访客系统
const SwiperInitLeft = () => {
  flagStr.mySwiperLeft = new Swiper('.tableBoxLeft', {
    direction: 'vertical',
    slidesPerView: 4, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }) // 鼠标移入事件
  var swiperContainer = document.querySelector('.tableBox')
  swiperContainer.addEventListener('mouseenter', function () {
    flagStr.mySwiperLeft?.autoplay.stop() // 鼠标移入时停止自动播放
  }) // 鼠标移出事件

  swiperContainer.addEventListener('mouseleave', function () {
    flagStr.mySwiperLeft?.autoplay.start() // 鼠标移出时开始自动播放
  }) // 监听鼠标滚轮事件
}
// Swiper - 智慧告警
const SwiperInit = () => {
  flagStr.mySwiper = new Swiper('.tableBox', {
    direction: 'vertical',
    slidesPerView: 5, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }) // 鼠标移入事件
  var swiperContainer = document.querySelector('.tableBox')
  swiperContainer.addEventListener('mouseenter', function () {
    flagStr.mySwiper?.autoplay.stop() // 鼠标移入时停止自动播放
  }) // 鼠标移出事件

  swiperContainer.addEventListener('mouseleave', function () {
    flagStr.mySwiper?.autoplay.start() // 鼠标移出时开始自动播放
  }) // 监听鼠标滚轮事件
}
// SwiperRight - 会议信息
const SwiperInitRight = () => {
  flagStr.mySwiperRight = new Swiper('.tableBoxRight', {
    direction: 'vertical',
    slidesPerView: 6, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }) // 鼠标移入事件
  var swiperContainer = document.querySelector('.tableBoxRight')
  swiperContainer.addEventListener('mouseenter', function () {
    flagStr.mySwiperRight?.autoplay.stop() // 鼠标移入时停止自动播放
  }) // 鼠标移出事件

  swiperContainer.addEventListener('mouseleave', function () {
    flagStr.mySwiperRight?.autoplay.start() // 鼠标移出时开始自动播放
  }) // 监听鼠标滚轮事件
}
// 点击切换存index
const handleActive = (index, str, item) => {
  flagStr[str] = index
  if (str == 'top1Flag') {
    if (item.url) {
      if (index === 0) {
        window.open(item.url + `?token=${localStorage.getItem('itoken') || ''}`)
      } else {
        window.open(item.url)
      }
    }
  }
  if (str == 'flagNav') {
    getAlarmtypecountInfo(item + 1)
  }
}
// 获取实时时间
const getTimer = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = padZero(now.getMonth() + 1) // 月份是从0开始的
  const day = padZero(now.getDate())
  const hours = padZero(now.getHours())
  const minutes = padZero(now.getMinutes())
  const seconds = padZero(now.getSeconds())
  const dayOfWeek = now.getDay()
  const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const timerLe = `${year}-${month}-${day}`
  const timerCe = `${dayNames[dayOfWeek]}`
  const timerRi = ` ${hours}:${minutes}:${seconds}`
  timerInfo1.value = timerLe
  timerInfo2.value = timerCe
  timerInfo3.value = timerRi
}
const padZero = (number) => {
  return number < 10 ? '0' + number : number.toString()
}
// 人员信息
let ondutyInfo = reactive({})
const getOndutyInfo = async () => {
  const res = await getOnduty()
  if (res.data.code == 0) {
    ondutyInfo = res.data.data
  }
}
// 今日厂区到岗人数及占比
const getdepondutyInfo = async () => {
  const res = await getDeponduty()
  if (res.data.code == 0) {
    let originalObj = res.data.data
    // let originalObj = {
    //   车间: 163,
    //   加工: 181,
    //   行政运营: 34,
    //   设备管理: 59,
    //   技术研发: 15,
    // };
    const newArray = Object.keys(originalObj).map((key) => ({
      name: key,
      value: originalObj[key],
    }))
    stateData.option1.series.data = newArray
    // 计算总数
    const totalValue = newArray.reduce((accumulator, currentObject) => {
      return accumulator + currentObject.value
    }, 0)
    stateData.option1.title[0].text = `{c|在岗人数}\n{d|${totalValue}}{a|(人)}`
  }
}

// 访客列表下载
const visitorDownLoad = async () => {
  if (!submodule.includes('访客信息-下载报表')) {
    ElMessage.error('暂无权限')
    return false
  }
  const res = await getVistorlistdownload(visitorTime.value)
  downLoad(res.data, '访客报表')
}
// 告警列表下载
const alarmdownload = async () => {
  if (!submodule.includes('告警信息-下载报表')) {
    ElMessage.error('暂无权限')
    return false
  }
  const res = await getAlarmdownload(selectAlaram.time)
  downLoad(res.data, '告警报表')
}
// 会议列表下载
const meetingdownload = async () => {
  if (!submodule.includes('会议信息-下载报表')) {
    ElMessage.error('暂无权限')
    return false
  }
  const res = await getMeetingdownload(meetTime.value)
  downLoad(res.data, '会议报表')
}
// 封装下载
const downLoad = (content, fileName) => {
  const blob = new Blob([content])
  if ('download' in document.createElement('a')) {
    const elink = document.createElement('a')
    elink.download = `${fileName}.xlsx`
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  } else {
    navigator.msSaveBlob(blob, `${fileName}.xlsx`)
  }
}
// 安防设备详情
const getDevicestatusInfo = async () => {
  const res = await getDevicestatus()
  if (res.data.code == 0) {
    const data = res.data.data
    stateData.safetyList1[0].num = data.video
    stateData.safetyList1[1].num = Math.round(
      (data.video / (data.video + data.videooff)) * 100
    )
    stateData.safetyList1[2].num = data.videooff

    stateData.safetyList2[0].num = data.entrance
    stateData.safetyList2[1].num = Math.round(
      (data.entrance / (data.entrance + data.entranceoff)) * 100
    )
    stateData.safetyList2[2].num = data.entranceoff
  }
  // const data = {
  //   total: 1200,
  //   video: 1056,
  //   entrance: 144,
  //   videooff: 39,
  //   entranceoff: 1,
  // };
}
// 创建会议弹框按钮
const createMeeting = async () => {
  const data = {
    room: sizeForm.room,
    subject: sizeForm.subject,
    start: dateFun(sizeForm.date[0]),
    end: dateFun(sizeForm.date[1]),
  }
  // console.log("data", data);
  const res = await setCreatemeeting(data)
  if (res.data.data.code == 0) {
    ElMessage({
      message: res.data.data.msg,
      type: 'success',
    })
    setTimeout(() => {
      meetingList = []
      getMeetinglistInfo()
    }, 60000)
    closeIfreamBox()
  } else {
    ElMessage({
      message: res.data.data.msg,
      type: 'warning',
    })
  }
}
const dateFun = (val) => {
  if (val) {
    const date = new Date(val)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    const second = String(date.getSeconds()).padStart(2, '0')
    const dateStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`
    return dateStr
  }
}
let meetingInfo = reactive([])
const getmeetingroomInfo = async () => {
  const res = await getmeetingroom()
  if (res.data.code == 0) {
    const { rooms } = res.data.result
    meetingInfo = rooms
  }
}
// 会议信息列表
let meetingList = reactive([])
flagStr.mySwiperRight?.autoplay.stop()
meetingList = []
flagStr.mySwiperRight = null
const getMeetinglistInfo = async () => {
  const res = await getMeetinglist(meetTime.value)
  if (res.data.code == 0) {
    meetingList = res.data.data
    setTimeout(() => {
      SwiperInitRight()
    }, 1000)
  }
}

let isIfream = ref(false)
const ruleFormRef = ref()
const closeIfreamBox = () => {
  isIfream.value = false
  sizeForm.date = []
  sizeForm.subject = ''
  sizeForm.room = ''
}

// 获取权限
let submodule = reactive([])
const getFuncsInfo = async () => {
  const res = await getFuncs()
  if (res.data.code == 0) {
    submodule = res.data.data
  }
  // submodule = ['访客信息-下载报表', '告警信息-下载报表', '会议信息-下载报表']
}
const createRom = () => {
  if (!submodule.includes('会议信息-创建会议')) {
    ElMessage.error('暂无权限')
    return false
  }
  isIfream.value = true
}
</script>

<style lang="scss" scoped>
@import '@/assets/tea.scss';
::v-deep .el-input__wrapper {
  box-shadow: 0 0 0 1px #053fc6 inset;
  background: #040a4e;
}
::v-deep .el-textarea__inner {
  background-color: #040a4e !important;
  box-shadow: 0 0 0 1px #053fc6 inset !important;
}
::v-deep .el-input__count {
  background-color: #040a4e !important;
}
::v-deep .el-select__wrapper {
  border-radius: 4px;
  background-color: #040a4e !important;
  box-shadow: 0 0 0 1px #053fc6 inset !important;
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-input__inner {
  color: #cfc8c8;
}
::v-deep .el-textarea__inner {
  color: #cfc8c8;
}
::v-deep .el-range-separator {
  color: #cfc8c8;
}
::v-deep .el-range-input {
  color: #cfc8c8;
}
::v-deep .el-select__placeholder.is-transparent {
  color: #cfc8c8;
}
</style>
